<template>
  <div class="box">
    <div class="content">
      <div class="users">
        <router-link to="/login">
          <em class="iconfont icon-yonghutouxiang"></em>
          <span>
            立即登录
          </span>
        </router-link>
      </div>
      <div class="usersRight">
        <em class="iconfont icon-icon--"></em>
        <em class="iconfont icon-shezhi"></em>
      </div>
    </div>
    <div class="conterina">
      <div class="menus">
        <ul class="menu">
          <li>
            <span class="iconfont icon-dianyingpiaoiocn"></span>
            <p>电影票</p>
          </li>
          <li>
            <span class="iconfont icon-xiaoshi"></span>
            <p>小食</p>
          </li>
          <li>
            <span class="iconfont icon-yanchu"></span>
            <p>演出票</p>
          </li>
        </ul>
      </div>
      <div class="discounts">
        <p class="disc">我的优惠</p>
        <ul>
          <li>
            <span class="iconfont icon-coupon"></span>
            <p>优惠券</p>
          </li>
          <li>
            <span class="iconfont icon-vipb"></span>
            <p>权益卡</p>
          </li>
          <li>
            <span class="iconfont icon-ka"></span>
            <p>乐影卡</p>
          </li>
        </ul>
      </div>
      <div class="serve">
        <p class="servep">我的服务</p>
        <ul class="servelist">
          <li>
            <span class="iconfont icon-anquan"></span>
            <p>影票查验</p>
          </li>
          <li>
            <span class="iconfont icon-shengqian"></span>
            <p>影迷省钱卡</p>
          </li>
          <li>
            <span class="iconfont icon-yuancircle46"></span>
            <p>我的小剧场</p>
          </li>
          <li>
            <span class="iconfont icon-taolun"></span>
            <p>发起的讨论</p>
          </li>
          <li>
            <span class="iconfont icon-shoucang"></span>
            <p>我的收藏</p>
          </li>
          <li>
            <span class="iconfont icon-bofangjilu"></span>
            <p>播放记录</p>
          </li>
          <li>
            <span class="iconfont icon-yinxingqia"></span>
            <p>银行特惠</p>
          </li>
          <li>
            <span class="iconfont icon--yu"></span>
            <p>阿里众筹</p>
          </li>
          <li>
            <span class="iconfont icon-yulebao"></span>
            <p>娱乐宝</p>
          </li>
          <li>
            <span class="iconfont icon-gongyi"></span>
            <p>三小时公益</p>
          </li>
          <li>
            <span class="iconfont icon-kefu"></span>
            <p>我的客服</p>
          </li>
          <li>
            <span class="iconfont icon-tiaochayumanyidu"></span>
            <p>满意度调查</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
}
</script>
<style lang="scss">
@import "@/lib/reset.scss";
.box {
  @include flexbox();
  @include flex-direction(column);
  @include rect(100%, 100%);
  // @include background-color(#ccccccea);
  .content {
    position: relative;
    @include rect(100%, 1.3rem);
    @include background-color(rgba(255, 0, 0, 0.4));
    @include color(#ffffff);
    .users {
      float: left;
      @include font-size(20px);
      @include padding(10px);
      em {
        @include font-size(50px);
        @include padding(10px 10px);
      }
    }
    .usersRight {
      float: right;
      @include padding(20px 10px);
      em {
        @include font-size(30px);
        @include padding(0 10px);
      }
    }
  }
  .conterina {
    @include rect(100%, 100%);
    @include background-color(#cccccccc);
    @include overflow(auto);
    .menus {
      @include rect(100%, 1rem);
      .menu {
        @include rect(90%, 1rem);
        @include flexbox();
        @include padding(0 3%);
        @include background-color(#ffffff);
        border-radius: 6px;
        margin-left: 20px;
        position: absolute;
        top: 86px;
        li {
          @include flex();
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          @include rect(100%, 100%);
          span {
            @include font-size(30px);
          }
        }
      }
    }
    .discounts {
      @include rect(90%, 1.1rem);
      @include background-color(#ffffff);
      border-radius: 6px;
      margin-left: 20px;
      .disc {
        @include font-size(20px);
        border-bottom: 1px solid #cccccccc;
      }
      ul {
        @include flexbox();
        @include background-color(#fff);
        li {
          @include flex();
          @include flexbox();
          @include flex-direction(column);
          @include justify-content();
          @include align-items();
          @include rect(100%, 100%);
          span {
            @include font-size(30px);
          }
        }
      }
    }
    .serve {
      @include rect(90%, 2.3rem);
      @include background-color(#fff);
      border-radius: 6px;
      margin-left: 20px;
      margin-top: 20px;
      .servep {
        @include font-size(20px);
        @include rect(100%, 0.3rem);
        border-bottom: 1px solid #ccc;
      }
      .servelist {
        display: flex;
        @include background-color(#fff);
        flex-wrap: wrap;
        li {
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
          @include rect(25%, 100%);
          span {
            @include font-size(25px);
          }
        }
      }
    }
  }
}
</style>
